<template>
  <div class="internal">
    <navbar :text="text"></navbar>
    <div class="bar">
      <van-row type="flex">
        <van-col
          span="8"
          class="border"
          v-for="(item, index) in navs"
          :key="item"
          :id="index"
          :class="{ active: id == index }"
          @click="getnavAction(index)"
          >{{ item }}</van-col
        >
      </van-row>
    </div>
    <Navigationsson :id="id"></Navigationsson>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { Row, Col } from "vant";
import Navigationsson from "./Navigationsson.vue";
export default {
  components: {
    navbar,
    [Row.name]: Row,
    [Col.name]: Col,
    Navigationsson,
  },
  data() {
    return {
      text: "",
      navs: ["非手术科室", "手术科室", "诊断相关科室"],
      id: 0,
    };
  },
  methods: {
    getnavAction(id) {
      this.id = id;
    },
  },
  created() {
    this.text = this.$route.params.text;
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
* {
  margin: 0;
  padding: 0;
}
.bar {
  position: absolute;
  top: 46px;
  z-index: 1;
  width: 100%;
  height: vw(49);
  background: #fff;
}
.border {
  border-color: rgba(242, 242, 242, 1);
}
.van-row {
  height: 100%;
}
.van-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "MicrosoftYaHei", "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: vw(14);
}
.van-nav-bar__content,
.top,
.van-nav-bar {
  height: vw(46) !important;
}
.active {
  background-color: rgba(46, 199, 201, 1);
  color: #fff;
}
</style>